<script lang="ts" setup>
import { useViewer } from '../../stores/viewer';
import { createBoolRef, createNumberRef, createStringRef } from './sceenConfig';
const viewer: any = useViewer().viewer;
const settingOptions = viewer.zz._settingOptions;

// const homeButton = createBoolRef('homeButton', settingOptions);
const enableLighting = createBoolRef('enableLighting', settingOptions);
const showGroundAtmosphere = createBoolRef('showGroundAtmosphere', settingOptions);
const depthTestAgainstTerrain = createBoolRef('depthTestAgainstTerrain', settingOptions);
const showBasemap = createBoolRef('showBasemap', settingOptions);
const baseColor = createStringRef('baseColor', settingOptions);
const terrainExaggeration = createNumberRef('terrainExaggeration', settingOptions);
</script>
<template>
  <table class="zz-scene-table">
    <tbody>
      <tr>
        <td class="first-col">地形夸张系数({{ terrainExaggeration }})</td>
        <td class="secode-col">
          <el-slider :max="10" :min="0.1" :step="0.1" v-model="terrainExaggeration" placement="right" />
        </td>
      </tr>
      <tr>
        <td class="first-col">昼夜区域</td>
        <td class="secode-col">
          <el-switch v-model="enableLighting" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td class="first-col">绘制地面大气</td>
        <td class="secode-col">
          <el-switch v-model="showGroundAtmosphere" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td class="first-col">地形深度监测</td>
        <td class="secode-col">
          <el-switch v-model="depthTestAgainstTerrain" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td class="first-col">显示底图</td>
        <td class="secode-col">
          <el-switch v-model="showBasemap" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td class="first-col">地球背景色</td>
        <td class="secode-col">
          <el-color-picker v-model="baseColor"></el-color-picker>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style>
@import './sceneConfig.css';
</style>
